import React from 'react';
import { Typography, Button, Card, Steps, Row, Col } from 'antd';
import { TeamOutlined, SolutionOutlined, SmileOutlined } from '@ant-design/icons';
import './style.less';

const { Title, Paragraph } = Typography;
const { Step } = Steps;

const JoinPage: React.FC = () => {
  // 模拟外部项目的路由链接
  const applicationUrl = 'http://localhost:3000/apply';

  return (
    <div className="join-container">
      <div className="join-intro">
        <Title level={2}>加入我们</Title>
        <Paragraph>
          我们欢迎对Web技术和人工智能充满热情的同学加入实验室。无论你是对前端、后端还是AI感兴趣，
          只要你有强烈的学习意愿和团队合作精神，都可以在这里找到发挥才能的舞台。
        </Paragraph>
      </div>

      <Row gutter={[24, 24]} className="join-content">
        <Col xs={24} md={16}>
          <Card title="申请流程" className="process-card">
            <Steps direction="vertical" current={-1}>
              <Step 
                title="提交申请" 
                description="点击下方的'申请加入'按钮，填写个人信息和申请理由。" 
                icon={<SolutionOutlined />} 
              />
              <Step 
                title="技术面试" 
                description="我们会根据你的申请安排技术面试，考察基础知识和学习能力。" 
                icon={<TeamOutlined />} 
              />
              <Step 
                title="加入实验室" 
                description="通过面试后，你将正式成为实验室的一员，参与项目和研究工作。" 
                icon={<SmileOutlined />} 
              />
            </Steps>
          </Card>
        </Col>
        <Col xs={24} md={8}>
          <Card title="招募方向" className="direction-card">
            <ul className="direction-list">
              <li>
                <Title level={4}>前端开发</Title>
                <Paragraph>熟悉HTML/CSS/JavaScript，了解React或Vue等框架</Paragraph>
              </li>
              <li>
                <Title level={4}>后端开发</Title>
                <Paragraph>熟悉Java/Python/Go等语言，了解常用数据库和框架</Paragraph>
              </li>
              <li>
                <Title level={4}>人工智能</Title>
                <Paragraph>有机器学习基础，熟悉Python和常用AI框架</Paragraph>
              </li>
            </ul>
          </Card>
        </Col>
      </Row>

      <div className="join-action">
        <Button type="primary" size="large" href={applicationUrl} target="_blank">
          申请加入
        </Button>
        <Paragraph className="join-note">
          点击上方按钮将跳转到实验室招新系统，请按照提示完成申请流程。
        </Paragraph>
      </div>
    </div>
  );
};

export default JoinPage;